<template>
    <div class="manylayer-content">
        <div class="manylayer-content-block">
            <el-collapse v-model="activeName" accordion >
                <el-collapse-item  v-for="(item,index) in layers" :key="index" :title="item.layername" :name="index" >
                    <div v-for="(val,key) in item.properties" :key="key" v-show="translatesta(key,item.layername)">
                    <!--<div v-for="(val,key) in item.properties" :key="key" v-show="translatelable(key,item.layername)!==key">-->
                        <span style="font-size: 14px;color: #e3b337">{{key | propertiesDict(item.layername,key)}}:</span>
                        <span style="margin-left: 20px;font-size: 14px;color: #00b1d6">{{val}}</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>


    </div>
</template>
<script>
import {dict} from '../../../utils/map/dictFilter';
import {getDictproperties} from "../../../api/cydtRequest";
let that
export default {
        props:['landarrtibutes'],
        watch: {
            landarrtibutes(newV,oldV) {
                this.layerinfo=newV
                /*console.log('zheli');

                var layers=newV;
                console.log(layers);
                layers.sort(function(a, b){
                    return a.layerid > b.layerid?1:-1});
                console.log(layers);
                this.layerinfo=layers;*/
              if(this.dictinfo.length<1){
                  that.getdicinfo('all')
              }

            }},
    beforeCreate () {
        that = this;
    },
        data() {
            return {
                layerinfo:[],
                activeName: '1',
                tabPosition: 'left',
                dictinfo:[]
            };
        },
    computed:{
        layers:function (){
            let that=this;
            var layerItems=that.layerinfo;
            layerItems.sort(function(a, b){
                return a.layerid > b.layerid?1:-1});
            return layerItems;
        }

    },
        methods:{
            getdicinfo(layername){
                getDictproperties({chsourcelayer: layername}).then(response=>{
                    that.dictinfo=response.data
                })

            },
            translatelable(key,layername){
                var ret= dict(that.dictinfo,key,layername)
                return ret
            },
            translatesta(key,layername){
                var result = false;
                var contain = false;
                if(that.dictinfo.length>0){
                    that.dictinfo.forEach(item => {
                        if (layername===item.chsourcelayer) {
                            contain = true
                        }
                    })
                }
                if(contain){
                    if(that.translatelable(key,layername)!==key){
                        result=true;
                    }
                }else {
                    result=true;
                }

                return result;
            }
        },
        filters:{
            propertiesDict:function(key,layername){

            var ret= dict(that.dictinfo,key,layername)
               return ret

            }
        },
    };
</script>
<style >
    .manylayer-content{
        width: 94%;
        height:96%;
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 1;
        right: 1%;
        bottom: 2%;
        background-color: rgba(76, 245, 255, 0);
        //background: white;
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;

    }
    .manylayer-content-block{
        width: 96%;
        margin: 10px auto;
    }

    .el-collapse-item__header{
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 48px;
        background-color: rgba(76, 245, 255, 0);
        color: #1A5CD7;
        font-weight: bold;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        font-size: 16px;
        font-weight: 500;
        transition: border-bottom-color .3s;
        outline: 0;
    }
    .el-collapse-item__wrap{
        background-color: rgba(76, 245, 255, 0);
    }
</style>
